<!--
 * @Author: bln
 * @Date: 2024-08-07 00:00:00
 * @FilePath: dev\pages\law\onSiteDisposal\detail.vue
 * @Description: 现场处置-详情页面
-->

<template>
	<view class="page">
    <!-- #ifdef H5-ONLY -->
    <theme-navbar :is-white="false" :title="title" :custom-back="goBack" style="z-index: 99999" />
    <!-- #endif -->
		<view class="content" v-if="visibleCon">
      <div class="header">
        <p class="title">{{ detail.knowledgeTitle }}</p>
        <p class="org">发布单位：{{ detail.ownOrgName }}</p>
        <p class="type">知识分类：{{ detail.knowledgeTypeName }}</p>
        <div class="u-flex u-row-center">
          <p class="time u-p-r-20">发布时间：{{ detail.releaseTime }}</p>
          <p class="creator">发布人：{{ detail.creatorName }}</p>
        </div>
      </div>
      <div class="con">
        <div class="collapse">
          <div class="collapse-header u-flex u-row-between" @click="show=!show">
            <span class="u-flex">
              <u-icon class="u-p-r-6" name="file-text-fill" color="#1890ff" size="40" />
              <span class="collapse-title">知识内容</span>
            </span>
            <u-icon :name="show ? 'arrow-down' : 'arrow-up'" size="36" />
          </div>
          <div v-if="show" class="collapse-body" v-html="detail.releaseContent"></div>
        </div>
        <div class="collapse">
          <div class="collapse-header u-flex u-row-between" @click="showAttach=!showAttach">
            <span class="u-flex">
              <u-icon class="u-p-r-6" name="tags-fill" color="#1890ff" size="40" />
              <span class="collapse-title">相关附件</span>
            </span>
            <u-icon :name="showAttach ? 'arrow-down' : 'arrow-up'" size="36" />
          </div>
          <attachment-upload v-if="showAttach" :noticeUuid="docId"></attachment-upload>
        </div>
      </div>
    </view>
	</view>
</template>

<script>
import queryService from '@/service/query/query.service.js'
import attachmentUpload from '@/pages/law/components/attachmentUpload.vue'

export default {
  components: { attachmentUpload },
  data() {
    return {
      show: true,
      showAttach: true,
      visibleCon: false,
      title: '',
      docId: '',
      detail: {}
    }
  },
  onLoad(opt) {
    this.title = opt.title
    this.docId = opt.docId
    if(this.docId) {
      this.getBaseInfo()
    } else {
      this.$u.error('参数错误')
    }
  },
  methods: {
    // 获取帮助详情信息
    getBaseInfo(docId) {
      this.$u.loading('加载中...')
      queryService.getKInfoById({ id: this.docId }).then(dr => {
        this.$u.hideLoading()
        if (dr.success) {
          this.detail =  { ...dr.bean }|| {}
          this.visibleCon = true
        }
      }).catch((err) => {
        this.$u.toast(err)
        this.$u.hideLoading()
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.page {
	padding: 10rpx 0!important;
  .content {
    height: 100%;
    display: flex;
    flex-direction: column;
    background: #f3f4f5;
  }
  .header {
    text-align: center;
    background: #fff;
    margin-bottom: 20rpx;
    padding-bottom: 20rpx;
  }
	.title {
    font-size: 36rpx;
    font-weight: 700;
		padding: 16rpx 30rpx;
	}
  .creator, .time, .org, .type {
    font-size: 28rpx;
    line-height: 50rpx;
    color: rgba(0, 0, 0, 0.65)
  }
  .con {
    flex: 1;
    
    background: #fff;
    .collapse-header {
      line-height: 80rpx;
      padding: 0 30rpx;
      background: #fafafa;
    }
    .collapse-title {
      font-size: 32rpx;
      font-weight: 700;
    }
    .collapse-body {
      padding: 30rpx;
      min-height: 200rpx;
    }
  }
}
</style>